class Main extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            partnername: '欢欢',
            minute: 60,
            danjia: '119.00',
            avatar: './src/girl2.jpg',
            count: 1,
            img: [],
            xmje: 119,
            fwarray: [],
            ylarray: [],
            ydarray: [],
            chefei: 10,
            couponmoney: 0,
isagree:!1,
            FWlist: [
                { name: '礼仪模特', id: 1 },
                { name: '陪诊', id: 2 },
                { name: '探店达人', id: 3 },
                { name: '陪拍', id: 4 },
                { name: '陪护', id: 5 },
                { name: '喝茶观影', id: 6 },
            ],
            YLlist: [
                { name: '台球助教', id: 1 },
                { name: '同城向导', id: 2 },
                { name: '商务聚餐', id: 3 },
                { name: 'K歌泡吧', id: 4 },
                { name: '电子竞技', id: 5 },
                { name: '密室桌游', id: 6 },
                { name: '夜宵大排档', id: 7 },
                { name: '项目任选（包天10小时）', id: 8 },
                { name: '高端商务聚餐（4小时）', id: 9 },
            ],
            YDlist: [
                { name: '骑行', id: 1 },
                { name: '篮球', id: 2 },
                { name: '钓鱼', id: 3 },
                { name: '健身', id: 4 },
                { name: '羽毛球', id: 5 },
                { name: '足球', id: 6 },
            ],
            couponword: '暂无优惠券',
            mingxiname: '礼仪模特',
            mingxisrc: './src/girl2.jpg',
            lichen: '2.2', qibu: '3.00', chaochu: '5.00', kmfee: '2.0',
            // desc:`暂无优惠券暂无优惠券暂无优惠券暂无优惠券暂无优惠券暂无优惠券暂无优惠券暂无优惠券暂
            // 无优惠券暂无优惠券暂无优惠券暂无优惠券暂无优惠券暂无优惠券暂无优惠券暂无优惠券暂无优惠券暂无优惠券暂无优惠券暂无优惠券暂无优惠券暂无优惠券暂无优惠券暂
            // 无优惠券暂无优惠券暂无优惠券暂无优惠券暂无优惠券暂无优惠券暂无优惠券暂无优惠券暂无优惠券暂无优惠券暂无优惠券暂无优惠券暂无优惠券暂无优惠券暂无优惠券暂
            // 无优惠券暂无优惠券暂无优惠券暂无优惠券暂无优惠券暂无优惠券暂无优惠券暂无优惠券暂无优惠券暂无优惠券暂无优惠券暂无优惠券暂无优惠券暂无优惠券暂无优惠券暂
            // 无优惠券暂无优惠券暂无优惠券暂无优惠券暂无优惠券暂无优惠券暂无优惠券暂无优惠券暂无优惠券暂无优惠券暂无优惠券暂无优惠券暂无优惠券暂无优惠券暂无优惠券暂
            // 无优惠券暂无优惠券暂无优惠券暂无优惠券暂无优惠券暂无优惠券暂无优惠券暂无优惠券暂无优惠券暂无优惠券暂无优惠券暂无优惠券暂无优惠券暂无优惠券暂无优惠券暂
            // `,
            desc: ``
        };
    }









    componentDidMount() {
        if (Constant.SWITCH_VCONSOLE) {
            new VConsole();
        }

        let openid = localStorage.getItem('openid')
        // getuser(openid, res => {
        //     if (res.issuccess == 1) {
        //         let user = res.user
        //         this.setState({ user, allprice:835, amount:  835 })
        //     }
        // })

        // let sizehtml = [],cphtml=[], { sizelist } = this.state;

        // sizehtml.push(<option value={-1}>请选择</option>)
        // sizelist.forEach((x, i) => {
        //     sizehtml.push(
        //         <option key={i} value={x}>{x} </option>
        //     )
        // })
        // cphtml.push(<option value={1}>大包(￥535元)</option>)
        // cphtml.push(<option value={0}>小包(￥310元)</option>)
        // cphtml.push(<option value={-1}>不购买</option>)

        // this.setState({ sizehtml,openid,cphtml })

        //  console.log(liststr?'1':'2','liststr');
        // let list = JSON.parse(localStorage.getItem('orderlist')) || []
        // console.log(list, 'list');

        // this.setState({ list }, () => {
        //     this.getamount()
        // })
        // this.getdata()

    }











    selectchange(e) {
        let { value } = e.target
        this.setState({ sizeid: value })
    }



    clickcate(name) {
        let { cate } = this.state
        if (cate != name) {
            this.setState({ cate: name })
        }
    }
    toinfo(id) {
        window.location.href = './cateinfo.html'
    }
    inputchange(type, e) {

    }
    radiochange(e) {
        console.log(e, 'radiochange');
    }
    datechange(e) {
        console.log(e.target.value, 'datechange');
    }
    clickitem(t, id) {
        console.log({ t, id }, 'clickitem');
        let arr = this.state[t + 'array']
        if (arr.indexOf(id) == -1) {
            arr.push(id)
        } else {
            arr.splice(arr.indexOf(id), 1)
        }
        console.log(arr, 'arr');

        this.setState({ [t + 'array']: arr })

    }

    addimg() {
        $('#fileimgsrc').click()
    }

    filechangeimg(e) {
        var that = this, { img } = this.state;
        var filedata = $('#fileimgsrc')[0].files[0];
        console.log(filedata, 'filedata');
        let _name, _fileName, filedatasize = 2048;

        _name = $('#fileimgsrc')[0].value;
        _fileName = _name.substring(_name.lastIndexOf(".") + 1).toLowerCase();
        if (_fileName !== "png" && _fileName !== "jpg" && _fileName !== "gif" && _fileName !== "jpeg") {
            alert("上传图片格式不正确，请重新上传");
        } else {
            if (filedatasize < filedata.size / 1024) {
                alert("上传图片不能大于2M");
                return;
            }

            // let filee = e
            var reader = new FileReader();
            reader.readAsDataURL(filedata);
            reader.onload = function (e) {
                var base64str = e.target.result;
                console.log('base64str', base64str);
                //  img.push(base64str)
                img.push(base64str)
                that.setState({ img })
                //  that.putswiperimglistdata([base64str], filee)
            }
        }
    }
    del_img(index) {
        console.log('del_img', index);
        let { img } = this.state
        img.splice(index, 1)
        this.setState({ img })
    }
    cbchange(e){
        //console.log('cbchange', e.target.checked);
        this.setState({ isagree: e.target.checked })
    }

     toxieyi(e){
        window.location.href='./xieyi.html?t='+e
    }



    render() {
        let { partnername,isagree, img, desc, count, FWlist, fwarray, YLlist, ylarray, ydarray, YDlist, couponword, couponmoney, xmje, chefei, avatar, mingxisrc, danjia, minute, mingxiname, lichen, qibu, chaochu, kmfee } = this.state;


        return (
            <div id="app">
                <div className="d1">
                    <div className="item location">
                        <div className="left">
                            <img src="./src/location.png" alt="" />
                            <p>请选择常用出发位置</p>
                        </div>
                        <img src="./src/right.png" alt="" className="rightimg" />
                    </div>
                </div>

                <div className="d1 form">
                    <div className="item">
                        <p>姓名</p>
                        <input type="text" onChange={this.inputchange.bind(this, 'name')} placeholder="请输入姓名" />
                    </div>
                    <div className="item">
                        <p>手机号</p>
                        <input type="text" onChange={this.inputchange.bind(this, 'name')} placeholder="请输入手机号" maxLength={11} />
                    </div>
                    <div className="item gender">
                        <p>性别</p>
                        <div className="radiogroup">
                            <input type="radio" name='gender' onChange={this.radiochange.bind(this, 0)} />
                            <p>男</p>
                            <input type="radio" name='gender' onChange={this.radiochange.bind(this, 1)} />
                            <p>女</p>
                        </div>
                    </div>
                    <div className="item birth">
                        <p>出生日期</p>
                        <input type="date" onChange={this.datechange.bind(this)} />
                    </div>
                    <div className="item">
                        <p>身高</p>
                        <input type="text" onChange={this.inputchange.bind(this, 'height')} placeholder="请输入身高cm" />
                    </div>
                    <div className="item">
                        <p>体重</p>
                        <input type="text" onChange={this.inputchange.bind(this, 'weight')} placeholder="请输入体重kg" />
                    </div>

                    <div className="item">
                        <p>介绍</p>
                        <textarea type="text" value={desc} onChange={this.inputchange.bind(this, 'introduce')} placeholder="请输入自我介绍，不超过500字" />
                    </div>


                </div>

                <div className="d1 duoxuan">
                    <div className="item">选择项目</div>
                    <div className="item cb">
                        <p className="title">服务</p>
                        <div className="team">
                            {
                                FWlist.map((x, i) => {
                                    return (
                                        <div
                                            onClick={this.clickitem.bind(this, 'fw', x.id)}
                                            className={`teamitem ${fwarray.indexOf(x.id) > -1 ? 'c' : ''}`}>{x.name}</div>
                                    )
                                })
                            }
                        </div>
                        <p className="title">娱乐</p>
                        <div className="team">
                            {
                                YLlist.map((x, i) => {
                                    return (
                                        <div
                                            onClick={this.clickitem.bind(this, 'yl', x.id)}
                                            className={`teamitem ${ylarray.indexOf(x.id) > -1 ? 'c' : ''}`}>{x.name}</div>
                                    )
                                })
                            }
                        </div>
                        <p className="title">运动</p>
                        <div className="team">
                            {
                                YDlist.map((x, i) => {
                                    return (
                                        <div
                                            onClick={this.clickitem.bind(this, 'yd', x.id)}
                                            className={`teamitem ${ydarray.indexOf(x.id) > -1 ? 'c' : ''}`}>{x.name}</div>
                                    )
                                })
                            }
                        </div>

                    </div>

                </div>

                <div class="app">
                    <p>上传照片</p>
                    <div className="d2 img">
                        <img onClick={this.addimg.bind(this)} style={{ display: img.length < 8 ? "" : "none" }} src='./src/add.png' className="addimg" />
                        <input onChange={this.filechangeimg.bind(this)} type='file' id='fileimgsrc' style={{ display: "none" }} />
                        <div style={{ display: img.length < 8 ? "" : "none" }} className="imglist">
                            {
                                img.map((x, i) => {
                                    return (
                                        <div className="img_warp imgsrc" >
                                            <img src={x} className="img" />
                                            <img className='closeimg' onClick={this.del_img.bind(this, i)} src='./src/img_close.png' />
                                        </div>
                                    )
                                })
                            }
                        </div>

                        {/* <div className="img_warp imgsrc" style={{ display: img[0] == '' ? "none" : "" }}>
                                <img src={img[0]} className="img" />
                                <img className='closeimg' onClick={this.del_img.bind(this, '0')} src='./src/img_close.png' />
                            </div>
                            <div className="img_warp imgsrc" style={{ display: img[1] == '' ? "none" : "" }}>
                                <img src={img[1]} className="img" />
                                <img className='closeimg' onClick={this.del_img.bind(this, '1')} src='./src/img_close.png' />
                            </div> */}

                    </div>
                    <p className="desc">默认第一张图片为头像，请至少上传3张照片</p>

                </div>
                <div className="cb">
                    <input type="checkbox" onChange={this.cbchange.bind(this)} checked={isagree} />
                    <div>
                        <p>提交即同意</p>
                        <p onClick={this.toxieyi.bind(this, 'fwcb')} className="blue">《用户协议（服务承包方）》</p>
                    </div>
                </div>
                            <div className="submitbtn">提交</div>




            </div >
        )
    }
}

ReactDOM.render(
    <div>
        {/* <TopLine /> */}
        <div id='body'>
            <Main />
        </div>
    </div>
    // <Barrage />
    , $('.container')[0]
)